<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="权限掌握的地址" prop="url" label-width="140px">
        <el-input v-model="ruleForm.url"></el-input>
      </el-form-item>

      <el-form-item label="权限类型" prop="type">
        <el-radio-group v-model="ruleForm.type">
          <el-radio label="0">目录</el-radio>
          <el-radio label="1">菜单</el-radio>
          <el-radio label="2">按钮</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="权限状态" prop="status">
        <el-radio-group v-model="ruleForm.status">
          <el-radio label="1">启用</el-radio>
          <el-radio label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上级菜单" prop="pid">
        <el-popover
          ref="menuListPopover"
          placement="bottom-start"
          trigger="click"
        >
          <el-tree
            :data="menuList"
            :props="menuListTreeProps"
            node-key="id"
            ref="menuListTree"
            @current-change="menuListTreeCurrentChangeHandle"
            :default-expand-all="true"
            :highlight-current="true"
            :expand-on-click-node="false"
          >
          </el-tree>
        </el-popover>
        <el-input
          v-model="ruleForm.pname"
          v-popover:menuListPopover
          :readonly="true"
          placeholder="点击选择上级菜单"
          class="menu-list__input"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  mounted: function () {
    //判断有无传值，有传值则修改需要提前查询并填充数据，无传值则添加
    if (this.$route.params.id != null) {
      this.selectPermissionById();
    }
    this.selectAllPermission();
  },

  data() {
    return {
      ruleForm: {
        name: "",
        url: "",
        type: "",
        status: "",
        pid: "",
        pname: "",
      },
      rules: {
        name: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
        url: [
          { required: true, message: "请输入权限url地址", trigger: "change" },
        ],
        type: [
          {
            required: true,
            message: "请至少选择一个权限类型",
            trigger: "change",
          },
        ],
        status: [
          {
            required: true,
            message: "请至少选择一个权限状态",
            trigger: "change",
          },
        ],
        pid: [
          { required: true, message: "请选择所属父类权限", trigger: "blur" },
        ],
      },
      menuList: [],
      menuListTreeProps: {
        label: "name",
        children: "children",
      },
    };
  },

  methods: {
    //查询所有权限，将其名称存入到上级菜单目录中
    selectAllPermission() {
      this.$httpRequest
        .post("permission/selectAllPermission")
        .then(({ data }) => {
          this.menuList = this.$format(data.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //用户选择上级菜单后，将上级菜单内容替换为用户选中的内容
    menuListTreeCurrentChangeHandle(data, node) {
      this.ruleForm.pid = data.pid;
      this.ruleForm.pname = data.name;
    },
    //通过动态路由传入的id来进行查询并提前填充数据
    selectPermissionById() {
      this.$httpRequest
        .get("auto/selectPermissionById", {
          params: { id: this.$route.params.id },
        })
        .then(({ data }) => {
          console.log(data);
          this.ruleForm = data.data;
          this.ruleForm.status = data.data.status + "";
          this.ruleForm.type = data.data.type + "";
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //用户点击提交后根据动态路由是否有传值进行分别处理
    submitForm(formName) {
      var url;
      if (this.$route.params.id != null) {
        url = "permission/updatePermission";
      } else {
        url = "permission/addPermission";
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var app = this;
          this.$httpRequest
            .post(url, {
              id: this.ruleForm.id,
              name: this.ruleForm.name,
              url: this.ruleForm.url,
              type: this.ruleForm.type,
              status: this.ruleForm.type,
              pid: this.ruleForm.pid,
            })
            .then(({ data }) => {
              console.log(data);
              app.$router.push("/toPermissionList");
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
</style>